<template>
  <div>
    <div class="update-img" id="update-img">
      <button type="button" class="el-button el-button--default el-button--mini"><i class="el-icon-link"></i><span>点击上传</span></button>
    </div>
    <div slot="tip" class="el-upload__tip">{{tip}}</div>


    <div class="pop-win" v-if="isPop">
        <div class="bg"></div>
        <div class="pop-body">
          <el-progress style="width: 100px;" :percentage="50"></el-progress>
          <div class="content">
            上传中..
          </div>
        </div>
    </div>

  </div>


</template>


<script>
  import $ from 'jquery';
  import WebUploader from 'webuploader';
  var uploader = {};
    export default {
        name: "ui-fileupdate",
        computed: {},
        props:{
            upUrl:{
                default:'',
                type:String
            },
            headers:{
                default: ()=> { return {};},
                type:Object
            },
            /**
             * 上传其他数据
             */
            updata:{
                default:()=>{ return {};},
                type:Object
            },
            /**
             * 上传格式
             */
            expAr:{
                default:()=>{ return {"title":"all","extensions":"csv,xls,xlsx,docx,doc,pdf,jpg,jpeg,png,mp4",mimeTypes:"image/jpg,image/jpeg,image/png,video/mp4,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.wordprocessingml.template,application/vnd.ms-excel,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.spreadsheetml.template,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/pdf"};},
                type:Object
            },
             tip:{
               default : "支持 word,xls,pdf,jpg,png 2MB!",
               type:String
             },
            onSuccess:{
                default:(type,fileList)=>{},
                type:Function
            }
        },
        data() {
            return {
              isPop : false
            }
        },
        created() {

        },
        methods: {
             upWeb:function () {
               var that = this;
               $("#update-img").html('<button type="button" class="el-button el-button--default el-button--mini"><i class="el-icon-link"></i><span>点击上传</span></button>');
               uploader = WebUploader.create({
                 auto: true, // 自动上传
                 swf: '/js/webuploader/Uploader.swf', // swf
                 server: this.upUrl, //上传地址
                 pick: "#update-img", //上传demo
                 fileVal:"file",
                 multiple: false,
                 compress:false,
                 accept:this.expAr
               });
               uploader.on('fileQueued',function (file) {
                      this.isPop = true;
               });
               uploader.on('uploadBeforeSend', function (obj, data, headers) {
                  for(var i in that.headers) {
                      headers[i] = that.headers[i];
                  }
               });

               uploader.on('uploadProgress', function (file, percentage) {
                 var prInt = parseInt(percentage * 100);
               });

               uploader.on('uploadSuccess',  (file,request) => {
                      this.$emit('onSuccess',request);
               });

               uploader.on("uploadError",function(file,reason){

               });

             }
        }
    }
</script>
<style>
    .update-img{font-size: 14px;color: #333;height: 40px;}
    .webuploader-container {
      position: relative;
    }
    .webuploader-element-invisible {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
      position: relative;
      display: inline-block;
      cursor: pointer;
      padding: 10px 15px;
      color: #fff;
      border-radius: 3px;
      overflow: hidden;
    }
    .webuploader-pick-hover {

    }

    .webuploader-pick-disable {
      opacity: 0.6;
      pointer-events:none;
    }


</style>

<style scoped>
    .pop-win{ position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999}
    .pop-win .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:.3;filter:alpha(opacity=30);}
    .pop-win .pop-body{border: 1px solid #f1f1f1;position:absolute;top:calc(50% - 60px);left:calc(50% - 70px);padding:30px;padding-right:50px;padding-left:50px;border-radius:10px;background:#fff;text-align:center}
    .pop-win .rotateIn{animation: rotate 1.5s linear infinite; }
    .content{font-size: 14px;}
    @keyframes rotate{
      from{transform: rotate(0deg)}
      to{transform: rotate(359deg)}
    }
    @keyframes posterScale{
      0% {transform: scale(0.9);}
      100% {transform: scale(1.2);}
    }
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
</style>
